.page-continer {
  height: 100%;
  width: 100%;
}

.page-head {
  width: 100%;
  text-align: center;
  line-height: 50px;
  color: #000;
  font-weight: bold;
  font-size: 16px;
}

/* 文字聊天页面 */
.online-btn {
  position: fixed;
  z-index: 10;
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

.chat-background {
  width: 100%;
  height: 100%;
  overflow: hidden;

  background-color: #fff;
  // background-image: url("http://mms2.baidu.com/it/u=433535628,2767818657&fm=253&app=120&f=JPEG?w=342&h=741");
  // background-repeat: no-repeat;
  // background-position: 0 0;
  // background-size: cover;

  .chat-page-top {
    /* background-image:url('http://mms2.baidu.com/it/u=433535628,2767818657&fm=253&app=120&f=JPEG?w=342&h=741') ; */
    padding-top: var(--status-bar-height);
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    z-index: 2;
    height: 100px;

    padding: 0px 15px;
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .chat-user-info {
      width: 100%;
      align-items: center;
      display: flex;
    }

    .chat-user-handle {
      .chat-user-handle-item {
        margin-left: 10px;
      }
    }
  }
}
.record-icon {
  .wave {
    background-color: #3588fe !important;
  }
}

//聊天记录列表样式

.get-more-msg {
  display: flex;
  justify-content: center;
  padding: 20rpx;
}
.message-ul {
  overflow-y: scroll;
  // height: 100%;
  padding: 40rpx 30rpx 330rpx 30rpx;
}

.message {
  // overflow-y: scroll;
  height: 100%;

  .main {
    margin-bottom: 30rpx;
  }

  .avatar {
    float: left;
    margin: 0 20rpx 0 0;
    border-radius: 6rpx;
  }

  .text {
    max-width: 80%;
    display: inline-block;
    position: relative;
    padding: 20rpx 30rpx;
    line-height: 50rpx;
    font-size: 32rpx;
    text-align: left;
    word-break: break-all;
    background-color: #f7f7f7;
    border-radius: 20rpx;
    color: #000;
    .tabs-question {
      display: block;
      margin-bottom: 10rpx;
    }
  }

  .audio-msg {
    overflow: hidden;
    max-width: 80%;
  }

  .self {
    text-align: right;

    .avatar {
      float: right;
      margin: 0 0 0 20rpx;
    }

    .text {
      background-color: #3588fe;
      color: #fff;
    }

    .audio-msg {
      text-align: right;

      > view {
        display: inline-block;
        height: 60rpx;
        width: 120rpx;
        background-color: #b2e281;
      }

      &:before {
        content: " ";
        position: absolute;
        top: 18rpx;
        right: 100%;
        border: 12rpx solid transparent;
        border-right-color: #fafafa;
      }
    }
  }
}

/* 实时语音页面 */
.chat-msg-box {
  height: calc(100% - 420px);
  // overflow-y: scroll;
  margin: 0px 5%;
  width: 90%;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: left;

  .chat-msg-item {
    padding: 0 0 20px 0;
  }

  .text-msg {
    max-width: 70%;
    display: inline-block;
  }

  .client-msg {
    text-align: left;
  }

  .myself-msg {
    text-align: right;
  }
}

/* 初始状态 */
.fade {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
  /* 过渡效果 */
}

/* 显示状态 */
.fade.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s 0s;
  /* 过渡效果 */
}

.chat-saying {
  .wave {
    background: #036af3 !important;
  }
}

.page-continer {
  overflow: hidden;
  height: 100%;
  width: 100%;

  .page-head {
    width: 100%;
    text-align: center;
    line-height: 50px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
  }
}

/* 实时语音页面 */
.page-voice-chat {
  .voice-user-name {
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }

  .voice-user-img {
    position: relative;
    margin: 50px auto;

    .chat-user-head-img {
      border: 10px solid #fff;
      border-radius: 50%;
      width: 150px;
      height: 150px;
      display: block;
      margin: 0 auto;
    }
  }

  .voice-status-text {
    font-size: 18px;
    font-weight: 800;
    margin-top: 20px;
    color: #fff;
    display: block;
    text-align: center;
  }

  .voice-chat-handle {
    position: absolute;
    bottom: 30px;
    height: 90px;
    width: 90%;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;

    .voice-chat-handle-box {
      border-radius: 50%;
      height: 80px;
      width: 80px;
      background-color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .voice-chat-handle-close.voice-chat-handle-box {
      background: #ff0000 !important;
    }
    .isCloseMic {
      background-color: #fff !important;
    }
    .mic-close-txt {
      font-size: 20px;
      color: #fff;
      font-weight: bold;
    }
    .mic-handle-box {
      position: relative;
    }
    .mic-close-txt {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .replay-animation {
    background: #fff;
    padding: 20px 30px;
    border-radius: 30px;
    position: absolute;
    top: -20px;
    right: 10%;
    box-shadow: 0px 10px 30px #999;
  }
}

/* 语音音波纹样式 */
.wave-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;

  .wave {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    background-color: #fff;
    border-radius: 10px;
    animation: wave-animation 1s ease-in-out infinite;
  }

  .wave:nth-child(1) {
    animation-delay: 0s;
  }

  .wave:nth-child(2) {
    animation-delay: 0.2s;
  }

  .wave:nth-child(3) {
    animation-delay: 0.5s;
  }

  @keyframes wave-animation {
    0%,
    100% {
      height: 20px;
    }

    50% {
      height: 40px;
    }
  }
}
